<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="http://www.w3.org/1999/XSL/Transform">
<head>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen" />
    <title>MyPetStore</title>
    <meta name="generator"
          content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <meta content="text/html; charset=windows-1252"
          http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <!--导入jquery-ui-->
    <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
    <link type="text/css" href="../js/jquery-ui.min.css" rel="stylesheet">
</head>
<style>
    .back-title{
        margin-top: 10px;
        margin-right: 40px;
        height: 100%;
        display: inline-block;
    }
</style>
<body>
<header th:fragment="header">
    <div id="Header">
        <div id="Logo">
            <div id="LogoContent">
                <a href="/catalog/main"><img src="../image/logo-topbar.gif" /></a>
            </div>
        </div>

        <div id="Menu">
            <div id="MenuContent">
                <!--购物车-->
                <a href="/cart/viewCart"><img align="middle" name="img_cart" src="../image/cart.gif" /></a>
                <!--分隔符-->
                <img align="middle" src="../image/separator.gif" />
                <!--登录登出-->
                <span th:if="${session.account==null}">
                    <a  href="/account/signonForm">Sign In</a>
                </span>
                <span th:if="${session.account!=null}">
                    <a href="/account/signOff">Sign Out</a>
                    <img align="middle" src="../image/separator.gif" />
                    <a th:href="@{/account/editAccountForm}">My Account</a>
                </span>
                <!--分隔符-->
                <img align="middle" src="../image/separator.gif" />
                <!--帮助-->
                <a href="/account/help">Help</a>
                <span id="information"></span>
            </div>
        </div>

        <div id="Search">
            <div id="SearchContent">
                <!--搜索-->
                <form action="" method="post" id="keyForm">
                    <!--开启自动补全功能autocomplete="on"-->
                    <input id="searchText" type="text" name="keyword" size="14" />
                    <input type="button" name="searchProducts" value="Search" id="searchSubmit"/>
                </form>
            </div>
        </div>



        <div id="QuickLinks">
            <a href="/catalog/category?categoryId=FISH" style="background-color:#fff;"><img src="../image/sm_fish.gif" /></a>
            <img src="../image/separator.gif" />
            <a href="/catalog/category?categoryId=DOGS" style="background-color:#fff;"><img src="../image/sm_dogs.gif" /></a>
            <img src="../image/separator.gif" />
            <a href="/catalog/category?categoryId=REPTILES" style="background-color:#fff;"><img src="../image/sm_reptiles.gif" /></a>
            <img src="../image/separator.gif" />
            <a href="/catalog/category?categoryId=CATS" style="background-color:#fff;"><img src="../image/sm_cats.gif" /></a>
            <img src="../image/separator.gif" />
            <a href="/catalog/category?categoryId=BIRDS" style="background-color:#fff;"><img src="../image/sm_birds.gif" /></a>
        </div>

    </div>
    <script>
        $(function (){
            //对搜索输入框的键盘按下后的事件进行监听keyup
            $('#searchText').on("keyup",function (){
                let datas={"word":$('#searchText').val()};
                $.post('/catalog/completeSearch',datas,function (data){

                });
                $.ajax({
                    //连接数据库进行查询
                    type:"GET",
                    url:"/catalog/completeSearch",
                    data:{"keyword":$('#searchText').val()},
                    dataType:"json",
                    success:function (data){
                        console.log("888888888888");
                        //创建数组用于存放获取的产品的名字
                        var searchResult=new Array();
                        for(var i=0;i<data.length;i++){
                            searchResult[i]=data[i].name;
                        }
                        //console.log(searchResult);
                        //将产品名显示在UI控件中
                        $('#searchText').autocomplete({
                            source:searchResult
                        });
                    }
                });
            });
            $('#searchSubmit').on('click',function (e) {
                e.preventDefault();
                console.log("点击搜索按钮");
                let datas = $('#keyForm').serialize();
                $.post('/catalog/searchProduct',datas,function (data){
                    if(data.code === 11)
                    {
                        console.log("搜索成功");
                        location.href = data.msg;
                    }

                });
            });
        });

    </script>
</header>
</body>
</html>